<template>
    <div id="main" class="ui-layout" :class="{'ui-layout-submenu-open': subMenuList.length > 1}">
    	<div class="ui-layout-header">
            <div class="ui-layout-header--menu">
                <Dropdown placement="bottom-end" transfer-class-name="header-panel-drop">
                    <div class="ui-layout-header__item user-item">
                        <img src="../assets/images/avatar.png" />
                        <span>控制面板</span>
                    </div>
                    <div slot="list" class="header-panel">
                      	<ul class="header-panel-menus">
                        	<li class="item"><a href="https://kf.doutix.com/admin/login/index/business_id/1.html" target="_blank">客服平台</a></li>
                      	</ul>
                      	<ul class="header-panel-menus">
                            <li class="item"><a href="javascript:void(0);" @click="handleChangePwd">修改登录密码</a></li>
                        	<li class="item"><a href="javascript:void(0);" @click="handleLogout">安全退出账号</a></li>
                      	</ul>
                    </div>
                </Dropdown>
            </div>
    	</div>
    	<div class="ui-layout-sidebar">
    		<div class="ui-logo">
    			<img src="../assets/images/logo_white.png" />
    		</div>
    		<div class="ui-layout-sideslip-menu">
	    		<ul class="ui-menu">
	                <li
                        v-for="item in menuList"
                        class="ui-menu-item"
                        :class="{'ui-menu-item-active': activeMenu == item.name}"
                        :key="item.name"
                        :style="item.meta && item.meta.style ? item.meta.style : {}"
                    >
	                    <div class="ui-menu-item-box" @click.stop="handleRoute(item)">
	                        <Icon v-if="item.meta && item.meta.icon" :type="item.meta.icon" :color="item.meta.iconcolor || '#fff'"></Icon>
	                        <span class="layout-text">{{ item.meta && item.meta.title ? item.meta.title : '' }}</span>
	                    </div>
	                </li>
	            </ul>
           	</div>
    	</div>
        <div v-if="subMenuList.length > 1" class="ui-layout-submenu">
            <template v-for="(item, index) in subMenuList">
                <div
                    class="ui-submenu-item"
                    :class="{'ui-submenu-item-active': item.name == activeSubMenu, 'ui-submenu-item-disabled': (item.meta && item.meta.disabled)}"
                    @click="handleRoute(item)"
                >
                    <div>{{ item.meta.title }}</div>
                </div>
            </template>
        </div>
        <div class="ui-layout-body">
            <div class="ui-layout-content">
                <keep-alive :include="cachePage">
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
        <Modal v-model="showModal" :width="380" title="修改登录密码" @on-cancel="handleClosePassword">
            <Form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-position="top">
                <FormItem label="旧密码" prop="old_password">
                    <Input v-model="pwdForm.old_password" type="password" placeholder="请输入旧密码" />
                </FormItem>
                <FormItem label="新密码" prop="password">
                    <Input v-model="pwdForm.password" type="password" placeholder="请输入新密码" />
                </FormItem>
                <FormItem label="确认密码" prop="password_confirmation">
                    <Input v-model="pwdForm.password_confirmation" type="password" placeholder="请输入确认密码" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleClosePassword">取消</Button>
                <Button type="primary" :loading="submitPasswrod" @click="handleSubmitChangePassword">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            showModal: false,
            submitPasswrod: false,
            pwdForm: {
                old_password: '',
                password: '',
                password_confirmation: '',
            },
            pwdRules: {
                old_password: [
                    { required: true, message: '旧密码不能为空', trigger: 'blur' },
                    { min: 6, message: '旧密码不能少于6位', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 6, message: '密码不能少于6位', trigger: 'blur' }
                ],
                password_confirmation: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' }
                ],
            },
            showUserPanel: false,
            activeMenuName: 'home_index',
            activeMenu: '',
            activeSubMenu: ''
        }
    },
    computed: {
    	user() {
    		return this.$store.state.user.user;
    	},
        cachePage () {
            return this.$store.state.app.cachePage;
        },
        menuList () {
            return this.$store.state.app.menuList;
        },
        subMenuList() {
            const { activeMenu, menuList } = this;
            const subMenu = menuList.find(item => item.name === activeMenu) || {};
            return subMenu.children || [];
        }
    },
   	watch: {
        '$route' (to) {
        	this.handleGetActive();
        }
    },
    mounted() {
    	this.handleGetActive();
    },
    methods: {
    	handleGetActive() {
            const $route = this.$route;
            this.activeMenu = $route.matched[0]['name'];
            this.activeSubMenu = $route.matched[1]['name'];
    	},
        handleRoute(route) {
            if(route.meta && route.meta.disabled) {
                this.$Message.warning('努力开发中，敬请期待！');
            	return false;
            }
            if(typeof route == 'string') {
            	this.$router.push({name: route})
            }else{
                // 找到最下级路由第一个
                const findName = function(rt) {
                    if(!rt.children || rt.children.length === 0) return rt.name;
                    return findName(rt.children[0]);
                }
            	this.$router.push({name: findName(route)});
            }
        },
        // 修改登录密码
        handleChangePwd(){
            this.showModal = true;
        },
        // 提交修改密码
        handleSubmitChangePassword() {
            if(this.submitPasswrod) return false;
            this.$refs.pwdForm.validate((valid) => {
                if(valid) {
                    if(this.pwdForm.password !== this.pwdForm.password_confirmation) {
                        this.$Message.error('两次密码不相同');
                        return false;
                    }
                    this.submitPasswrod = true;
                    this.$ajax.post('/admin/change_password', this.pwdForm).then(res => {
                        this.submitPasswrod = false;
                        this.$Message.success('密码修改成功');
                        this.handleClosePassword();
                    }).catch(err => {
                        this.submitPasswrod = false;
                        this.$Message.error(err.message || '密码修改失败');
                    })
                }
            })
        },
        handleClosePassword() {
            this.showModal = false;
            setTimeout(() => {
                this.pwdForm.old_password = '';
                this.pwdForm.password = '';
                this.pwdForm.password_confirmation = '';
            }, 300)
        },
        // 退出
        handleLogout() {
        	this.$store.commit('logout');
        	this.$router.push({name: 'login'});
        }
    }
};
</script>

<style lang="less">
.user-item {
    display: flex;
    align-items: center;
    img {
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
}
.header-panel-drop {
    margin: 0;
    padding: 0;
    border-radius: 0;
}
.header-panel {
    padding: 20px 15px; 
    width: 160px;
    color: #a9acac;
    font-size: 12px;
    text-align: left;
    line-height: 1.2;
    background-color: #303840;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    &-menus .item {
        margin-bottom: 15px;
    }
    &-menus .item:last-child {
        margin-bottom: 0;
    }
    &-menus + &-menus {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #a9acac;
    }
    a {
        color: inherit;
    }
    a:hover {
        color: #fff;
    }
}
</style>